<template>
  <page-header-wrapper>
    <global-search ref="globalSearch" :list="searchList" @search="handleSearch" @reset="handleReset"> </global-search>
    <a-card :bordered="false">
      <s-table
        ref="table"
        size="default"
        :rowKey="(record, index) => index"
        :columns="columns"
        :data="loadData"
        :pagination="{ showTotal: (total) => `共 ${total} 条` }"
      >
        <y-button
          slot="tabAction"
          type="warning"
          plain
          icon="pie-chart"
          theme="filled"
          @click="handleViewChart">查看图表</y-button>
        <span slot="index" slot-scope="text, record, index">{{ index + 1 }} </span>
      </s-table>
    </a-card>
    <chart :visible.sync="visibleChart"></chart>
  </page-header-wrapper>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { getSummaryStatement } from '@/api/statementAndStatistics'
import chart from './components/chart.vue'
export default {
  components: {
    STable,
    Ellipsis,
    chart
  },
  data () {
    return {
      visibleChart: false,
      searchList: [
        {
          label: '时间',
          fields: 'range',
          type: 'range',
          extra: '查看图表请选择时间'
        },
        {
          label: '筛选条件',
          fields: 'filter',
          type: 'select',
          extra: '查看图表请选择筛选条件',
          initialValue: '全部',
          props: {
            allowClear: false,
            placeholder: '请选择筛选条件',
            options: [
              {
                value: '全部',
                label: '全部'
              },
              {
                value: '累计已实施保障',
                label: '累计已实施保障'
              },
              {
                value: '累计退出保障',
                label: '累计退出保障'
              },
              {
                value: '正在实施保障',
                label: '正在实施保障'
              },
              {
                value: '进入保障',
                label: '进入保障'
              },
              {
                value: '退出保障',
                label: '退出保障'
              }
            ]
          }
        }
      ],
      queryParam: {
        Mode: 'ZTQK',
        Time: ''
      },
      columns: [
        {
          title: '序号',
          align: 'center',
          width: '80px',
          scopedSlots: { customRender: 'index' }
        },
        {
          title: '时间',
          align: 'center',
          dataIndex: 'time'
        },
        {
          title: '租赁补贴（户）',
          align: 'center',
          dataIndex: ''
        },
        {
          title: '实物配租配售（户）',
          align: 'center',
          dataIndex: ''
        },
        {
          title: '总户数（户）',
          align: 'center',
          dataIndex: ''
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getSummaryStatement(requestParameters).then((res) => res)
      }
    }
  },
  methods: {
    handleSearch (values) {
      // this.queryParam.Time = values.Time
      this.tableRefresh(true)
    },
    handleReset () {
      // this.queryParam.Time = ''
      this.tableRefresh(true)
    },
    tableRefresh (refresh = false) {
      this.$refs.table.refresh(refresh)
    },
    handleViewChart () {
      const data = this.$refs.globalSearch.getFieldsValue()
      const { range, filter } = data
      if (this.$isEmpty(range)) {
        this.$message.warning('请选择时间')
      } else if (this.$isEmpty(filter)) {
        this.$message.warning('请选择筛选条件')
      } else {
        this.visibleChart = true
      }
    }
  }
}
</script>
<style scoped>
</style>
